import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect, Link } from 'dva';
import {
  Table,
  Icon,
  Divider,
  Form,
  Select,
  DatePicker,
  Input,
  Card,
  Tag,
  Avatar,
  Checkbox,
  Rate,
  Progress,
  Button,
  Dropdown,
  Row,
  Col,
  Modal,
  Collapse,
  List,
  Radio,
} from 'antd';

import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import ImageUploader from './ImageUploader';
import ApplyOrderDisplayer from '../ApplyOrderDisplayer';
import styles from './AttachmentTable.less';
import ImageDisplayer from './ImageDisplayer';
import { solo } from '../../../common/solo';
import DescriptionList from '../../../components/DescriptionList';
import index from 'antd/lib/checkbox';

const { Description } = DescriptionList;
const Panel = Collapse.Panel;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;
const Option = Select.Option;

export default class AttachmenTable extends PureComponent {
  calcAttachmentData = metaInfo => {
    const { customerInfo, projectInfo, customerId } = this.props;
    // console.log('calcAttachmentData customerInfo', customerInfo.attachs);
    // console.log('calcAttachmentData projectInfo',projectInfo);
    // console.log('calcAttachmentData metaInfo',metaInfo);

    return {
      projectId: projectInfo ? projectInfo.projectId : null,
      customerId: customerInfo ? customerInfo.id : null,
      attachType: 0,
      attachKind: metaInfo.attachKind,
      type: metaInfo.name,
    };
  };

  handleImageUploaded = (fieldName, fileList) => {
    // console.log('handleImageUploaded',fieldName);
    // console.log('handleImageUploaded',fileList);

    if (this.props.onAttachmentChanged) {
      this.props.onAttachmentChanged(fieldName, fileList, null);
    }
  };

  handleRemoveImage = (fieldName, fileInfo) => {
    // console.log('handleRemoveImage',fieldName);
    // console.log('handleRemoveImage00000',fileInfo);

    if (this.props.onAttachmentRemove) {
      this.props.onAttachmentRemove(fieldName, fileInfo);
    }
  };

  attachmentData = [
    {
      key: '1',
      name: '提车照片',
      projectInfo: '',
      customerId: '',
      fieldName: 'pickCar',
      attachKind: '1620',
      maxCount: 10,
      files: [],
    },
    {
      key: '2',
      name: '行驶证',
      projectInfo: '',
      customerId: '',
      fieldName: 'driveLicenseImg',
      attachKind: '1680',
      maxCount: 2,
      files: [],
    },
    {
      key: '3',
      name: '合格证',
      projectInfo: '',
      customerId: '',
      fieldName: 'carQualified',
      attachKind: '1670',
      maxCount: 1,
      files: [],
    },
    {
      key: '4',
      name: '登记证',
      projectInfo: '',
      customerId: '',
      fieldName: 'carRegister',
      attachKind: '1660',
      maxCount: 1,
      files: [],
    },
    {
      key: '5',
      name: '首付款凭证',
      projectInfo: '',
      customerId: '',
      fieldName: 'firstPayImg',
      attachKind: '1610',
      maxCount: 1,
      files: [],
    },
    {
      key: '6',
      name: '其他',
      projectInfo: '',
      customerId: '',
      fieldName: 'otherImg',
      attachKind: '1690',
      maxCount: 10,
      files: [],
    },
  ];

  attachmentColumns = [
    { title: '名称', dataIndex: 'name', key: 'name', width: '20%' },
    {
      title: '附件',
      dataIndex: 'files',
      key: 'files',
      width: '80%',
      align: 'center',
      render: (text, record, index) => {
        // console.log("index",  index)
        return (
          <div>
            {/* {JSON.stringify(record)} */}
            {!this.props.applyDisabled ? (
              <ImageUploader
                size="small"
                maxCount={record.maxCount}
                fileList={record.files}
                showRemoveIconType={true}
                fieldName={record.fieldName}
                onImageUploaded={this.handleImageUploaded}
                onRemoveImage={this.handleRemoveImage}
                attachmentData={this.calcAttachmentData(record)}
              />
            ) : (
              <List
                key={record.key}
                size="small"
                grid={{ gutter: 16, xs: 2, sm: 4, md: 6, lg: 8, xl: 10, xxl: 12 }}
                dataSource={record.files}
                renderItem={(item, index) => (
                  <List.Item>
                    <ImageDisplayer src={item.url} index={index} />
                  </List.Item>
                )}
              />
            )}
          </div>
        );
      },
    },
  ];

  attachVideoData = [
    {
      key: '1',
      name: '视频附件',
      files:
        this.props.customerInfo &&
        this.props.customerInfo.attachs.length > 0 &&
        this.props.customerInfo.attachs.homeVisit_videos
          ? this.props.customerInfo.attachs.homeVisit_videos
          : [],
    },
  ];

  attachsVideoColumns = [
    { title: '名称', dataIndex: 'name', key: 'name', width: '20%' },
    {
      title: '附件',
      dataIndex: 'files',
      key: 'files',
      width: '80%',
      align: 'center',
      render: (text, record, index) => {
        return (
          <div>
            <List
              key={record.key}
              size="small"
              span={24}
              dataSource={record.files}
              renderItem={item => (
                <List.Item>
                  <a target="_blank" href={`${solo.fileDownload}${item}`}>
                    下载
                  </a>
                </List.Item>
              )}
            />
          </div>
        );
      },
    },
  ];

  render() {
    let { attachmentData, attachmentColumns, attachsVideoColumns, attachVideoData } = this;
    const { customerInfo } = this.props;
    // console.log("attachVideoData", customerInfo)
    const { data } = this.props;
    // const { applyDisabled } = this.props;
    const files = data ? data : attachmentData;
    return (
      <div>
        <Table
          className={styles.attachmentTable}
          size="small"
          pagination={false}
          dataSource={files}
          columns={attachmentColumns}
        />
        <Table
          className={styles.attachmentTable}
          size="small"
          pagination={false}
          dataSource={attachVideoData}
          columns={attachsVideoColumns}
          showHeader={false}
        />
      </div>
    );
  }
}
